<template>
  <div class="app-manage-side-menu">
    <!-- <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <MenuUnfoldOutlined v-if="state.collapsed" />
      <MenuFoldOutlined v-else />
    </a-button> -->
    <a-page-header style="color: #fff" title="返回应用列表" @back="() => router.replace('/app-manage')" />
    <div class="app-manage-side-menu-icon">
      <a-image
        :preview="false"
        :width="50"
        :height="50"
        :src="state.appDetail.iconUrl"
        fallback=""
      />
      <div style="margin-top: 10px">{{ state.appDetail.name }}</div>
    </div>
    <div></div>
    <a-menu
      v-model:openKeys="state.openKeys"
      v-model:selectedKeys="state.selectedKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="state.collapsed"
      @click="onMenuClick"
    >
      <a-sub-menu key="basic-info">
        <template #icon>
          <MailOutlined />
        </template>
        <template #title>基础信息</template>
        <a-menu-item key="/basic-info/app">应用信息</a-menu-item>
        <a-menu-item key="/basic-info/clients">客户端管理</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="develop">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <template #title>开发管理</template>
        <a-menu-item key="/develop-manage/acl">访问控制管理</a-menu-item>
        <a-menu-item key="/develop-manage/third-party">第三方管理</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
  <div class="app-manage-content">
    <router-view></router-view>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, watch, markRaw, ref, provide } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/store/user'
import { getAppDetail } from '../factory'

const routes = useRoute()
const { appKey } = routes.query

const router = useRouter()

const { query } = routes
const onMenuClick = ({ key: path }) => {
  router.push({ path: `/app-manage/detail${path}`, query })
}
const state: any = reactive({
  collapsed: false,
  selectedKeys: ['/basic-info/app'],
  openKeys: ['basic-info', 'develop'],
  preOpenKeys: ['basic-info'],
  appDetail: {
    domain: '',
    icon: '',
    description: '',
    id: '',
    createTime: '',
    name: '',
    enable: false,
    modifyTime: '',
    key: '',
  },
})
watch(
  () => routes.path,
  (path) => {
    let p: any = path.split('/')
    p = p.slice(3, p.length).reduce((total, current) => {
      return total + '/' + current
    })
    p = '/' + p
    state.selectedKeys[0] = p
  },
  { immediate: true }
)

const fetchData = async () => {
  const res = await getAppDetail(appKey as string)

  state.appDetail = res.data
}

fetchData()
</script>
<style lang="less" scoped>
@side-width: 200px;
@top-height: 50px;
// @top-tab-height: 35px;
.app-manage-side-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: @side-width;
  color: #fff;
  background-color: #232324;
  user-select: none;

  &-back {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-color: #fff;
    border-style: solid;
    border-width: 1px 0;
    cursor: pointer;
  }

  &-icon {
    // width: 100px;
    // height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 0 32px;
    // border-style: solid;
    // border-color: #fff;
    // border-width: 1px 0 1px 0;
  }
}

.app-manage-content {
  // position: absolute;
  // top: 0;
  // left: 0;
  // top: @top-height;
  // right: 0;
  // bottom: 0;
  // left: @side-width;
  background-color: rgb(238 238 238);
  // padding: 16px;
}

:deep(.ant-page-header-back-button) {
  color: #fff;
}

:deep(.ant-page-header-heading-title) {
  color: #fff;
  font-size: 16px;
}
</style>
